<script setup lang="ts">
  import aArticle from "./component/a-list-article.vue"
  import SearchUtil from "@/components/utils/Search/Index.vue"
  import CardItem from "./component/card-item.vue";
</script>

<template>
  <a-row style="margin: 1rem" :gutter="16">
    <a-col :span="18">
      <a-card>
        <a-flex justify="space-between" align="center">
          <p class="forum-p">社区论坛</p>
          <div>
            <search-util search-type="文章搜索" placeholder="请输入文章信息">点击搜索</search-util>
            <router-link :to="'/write/'+'article'">
              <a-button type="primary" style="margin-left: 1rem">发布文章</a-button>
            </router-link>
          </div>
        </a-flex>
      </a-card>
      <a-article></a-article>
      <a-card>
        推荐内容
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card :body-style="{padding: '0'}" :bordered="false" class="other-area">
        <a-flex vertical gap="20">
          <card-item title="推荐关注" bg-color="rgba(238, 247, 242,.81)" access="推荐关注"/>
          <CardItem title="论坛社区" access="论坛社区"/>
        </a-flex>
      </a-card>
    </a-col>
  </a-row>

</template>

<style scoped lang="scss">
.forum-p{
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 1.2rem;
}
.other-area{
  height: 100%;
  width: 100%;
}
</style>